$(function () {
  //定义一个全局变量
  //将来筛选和分页都可以修改
  let query = {
    pagenum: 1, //	是	string	分页页码，如5表示获取第5页的数据
    pagesize: 4, //是	string	每页显示多少条数据，如2表示每页显示2条数据
    state: "", //否  string	根据文章状态筛选；可填“已发布”或“草稿”
    cate_id: "", //否	number	根据分类筛选；如3表示只获取分类id为3的文章
  };
  //需求1.展示文章列表
  let layer = layui.layer;
  initArticleList();
  //封装成函数 后面的分页 筛选 删除会用到
  function initArticleList() {
    axios({
      method: "GET",
      url: "/my/article/list",
      params: query,
    }).then((res) => {
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      // console.log(res.data);
      // //TODO:成功后,渲染
      let arr = [];
      res.data.data.forEach((ele) => {
        arr.push(`
        <tr>
        <td>${ele.title}</td>
        <td>${ele.cate_name}</td>
        <td>${dateFormat(ele.pub_date)}</td>
        <td>${ele.state}</td>
        <td>
          <a href='/article/art_edit.html?id=${
            ele.Id
          }' class="layui-btn layui-btn-xs">
            编辑
          </a>
          <button
           data-id=${ele.Id}
            class=" btn-delete  layui-btn layui-btn-xs layui-btn-danger"
          >
            删除
          </button>
        </td>
      </tr>
        `);
      });
      //赋值 写到forEach()外
      let str = arr.join("");
      $("tbody").empty().html(str);
      //赋值之后 做分页
      pageRender(res.data.total);
    });
  }
  //需求2:初始化文章分类
  let form = layui.form;
  initArtCateList();
  function initArtCateList() {
    axios({
      method: "GET",
      url: "/my/article/cates",
    }).then((res) => {
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      let arr = ['<option value="">请选择文章类别</option>'];
      res.data.data.forEach((ele) => {
        arr.push(`
        <option value="${ele.Id}">${ele.name}</option>
        `);
      });
      //赋值
      let str = arr.join("");
      $("[name=cate_id]").empty().html(str);
      form.render();
    });
  }
  //需求3. 筛选
  $("#formSearch").on("submit", function (e) {
    e.preventDefault();
    //该分类和状态两个全空参数
    query.cate_id = $("[name=cate_id]").val();
    query.state = $("[name=state]").val();
    //重新调用文章列表初始化方法(不是文章分类列表)
    initArticleList();
  });
  //需求4.分页
  var laypage = layui.laypage;
  function pageRender(total) {
    laypage.render({
      elem: "pageBox",
      count: total,
      limit: query.pagesize,
      curr: query.pagenum,
      //配置定制化的分页
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      limits: [2, 3, 5, 10],
      jump: function (obj, first) {
        //首次不执行
        if (!first) {
          //do something
          // 修改参数,重新渲染页面
          query.pagenum = obj.curr;
          query.pagesize = obj.limit;
          //重新渲染
          initArticleList();
        }
      },
    });
  }
  //需求5.删除
  $("tbody").on("click", ".btn-delete", function () {
    let id = $(this).attr("data-id");
    layer.confirm(
      "确认删除此文章嘛?",
      { icon: 3, title: "提示" },
      function (index) {
        axios({
          method: "GET",
          url: "/my/article/delete/" + id,
        }).then((res) => {
          if (res.data.status != 0) {
            return layer.msg(res.data.message);
          }
          //成功提示
          layer.msg("恭喜您,删除文字成功");
          if ($(".btn-delete").length == 1 && query.pagenum >= 2) {
            query.pagenum--;
          }
          initArticleList();
        });
        layer.close(index);
      }
    );
  });
});
